<template>
  <div class="goods transition">
    <!-- 商品图片 -->
    <img v-lazy="goods.vo_main_photo_url" @click="toGoodsDetail()">
    <!-- 价格和已售多少件 -->
    <div class="line p">
      <div class="price"><span class="unit">￥</span>{{goods.vo_store_price}}</div>
      <div class="sale-number">已售{{goods.vo_goods_salenum || 0}}件</div>
      <div class="clear"></div>
    </div>
    <div class="line f">
      <div class="flag">{{goods.goods_numType == '0' ? '订货' : '现货'}}</div>
    </div>
    <div class="line n" @click="toGoodsDetail()">{{goods.vo_title}} {{goods.vo_goods_serial}}</div>
    <div class="line s">
      <!-- 店铺名称 -->
      <div class="store-name" :title="goods.storeName" @click="toStoreCenter()">{{goods.storeName}}</div>
      <div class="store-loc">{{goods.storeArea}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    /**
     * 跳转到商家中心
     */
    toStoreCenter() {
      // this.$router.push(`/shop/${this.goods.vo_storeId}`)
      window.open(`/shop/${this.goods.vo_storeId}`)
    },

    /**
     * 跳转到商品详情页
     */
    toGoodsDetail() {
      // this.$router.push(`/goods/detail/${this.goods.vo_id}`)
      window.open(`/goods/detail/${this.goods.vo_id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.clear {
  clear: both;
}
.goods {
  border: 1px solid #ececec;
  width: 236px;
  height: 360px;
  padding: 4px;

  img {
    cursor: pointer;
    width: 226px;
    height: 226px;
  }

  .line {
    &.p {
      margin-top: 10px;
    }

    &.f {
      margin-top: 8px;
    }

    &.n {
      cursor: pointer;
      margin-top: 6px;
      height: 30px;
      word-break: break-word;

      &:hover {
        color: #de1474;
      }
    }

    &.s {
      border-top: 1px solid #e6e6e6;
      color: #a1a1a1;
      margin-top: 8px;
      height: 26px;
      line-height: 25px;
    }

    .price {
      color: #ed006d;
      font-size: 18px;
      float: left;

      .unit {
        font-size: 12px;
      }
    }

    .sale-number {
      color: #ababab;
      font-size: 12px;
      float: right;
    }

    .flag {
      border: 1px solid #de1474;
      border-radius: 1px;
      color: #de1474;
      cursor: default;
      font-size: 12px;
      width: 34px;
      height: 18px;
      line-height: 16px;
      text-align: center;
    }

    .store-name {
      cursor: pointer;
      float: left;
      max-width: 50%;
      overflow: hidden;
      height: 25px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .store-loc {
      float: right;
      max-width: 50%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  &:hover {
    box-shadow: 2px 2px 4px lightgrey;
  }
}
</style>

